import React from 'react';
import { Clock, CheckCircle, XCircle } from 'lucide-react';
import { Card } from '../ui/Card';
import { Button } from '../ui/Button';
import { SnackList } from '../snacks/SnackList';
import { useTranslation } from 'react-i18next';
import type { Order } from '../../types';

interface OrderCardProps {
  order: Order;
}

export function OrderCard({ order }: OrderCardProps) {
  const { t } = useTranslation();

  const getStatusIcon = () => {
    switch (order.status) {
      case 'pending':
        return <Clock className="h-5 w-5 text-yellow-500" />;
      case 'paid':
        return <CheckCircle className="h-5 w-5 text-green-500" />;
      case 'completed':
        return <CheckCircle className="h-5 w-5 text-green-500" />;
      case 'cancelled':
        return <XCircle className="h-5 w-5 text-red-500" />;
    }
  };

  const getStatusText = () => {
    switch (order.status) {
      case 'pending':
        return t('订单.状态类型.待支付');
      case 'paid':
        return t('订单.状态类型.已支付');
      case 'completed':
        return t('订单.状态类型.已完成');
      case 'cancelled':
        return t('订单.状态类型.已取消');
    }
  };

  const quantities = order.snacks.reduce((acc, { snack, quantity }) => ({
    ...acc,
    [snack.id]: quantity
  }), {});

  return (
    <Card>
      <div className="flex justify-between items-start mb-4">
        <div>
          <div className="flex items-center gap-2 mb-1">
            {getStatusIcon()}
            <span className="font-medium">{getStatusText()}</span>
          </div>
          <p className="text-sm text-gray-600">
            {t('订单.时间')}: {new Date(order.timestamp).toLocaleString()}
          </p>
        </div>
        <div className="text-right">
          <p className="text-sm text-gray-600">{t('订单.金额')}</p>
          <p className="text-lg font-semibold">¥{order.total}</p>
        </div>
      </div>

      <SnackList 
        snacks={order.snacks.map(({ snack }) => snack)}
        showQuantity
        quantities={quantities}
      />

      <div className="flex justify-end gap-2 mt-4">
        {order.status === 'pending' && (
          <>
            <Button variant="secondary" onClick={() => console.log('取消订单')}>
              {t('通用.取消')}
            </Button>
            <Button variant="primary" onClick={() => console.log('支付订单')}>
              {t('订单.支付.标题')}
            </Button>
          </>
        )}
      </div>
    </Card>
  );
}